import React from 'react';
import { Tabs, PageHeader, Tag, Card } from 'antd';
import QuerySetting from './query-setting';
import FormSetting from './form-setting';
import FormFieldSetting from './form-field-setting';
import TableSettting from './table-settting';
import TableFieldSettting from './table-field-settting';
import TableAction from './table-action';
import {
  maintableOperateExpandList,
  getDefaultActiveKey,
  setDefaultActiveKey,
  TabsSetting,
} from './main.data';

const { TabPane } = Tabs;

function fromObjectFilter(needparams: any, from: object): any {
  if (from) {
    return { [needparams]: from[needparams] };
  }
}

function getTabPaneNode(this: any, key: string) {
  const { allFieldToValueObj } = this.state;
  const TabPaneNodes = {
    FormSetting: <FormSetting _letterPoint={this}></FormSetting>,
    TableSettting: <TableSettting _letterPoint={this}></TableSettting>,
    QuerySetting: (
      <QuerySetting
        _letterPoint={this}
        allFieldToValueObj={fromObjectFilter('sys_table_set_code', allFieldToValueObj)}
      ></QuerySetting>
    ),
    FormFieldSetting: (
      <FormFieldSetting
        _letterPoint={this}
        allFieldToValueObj={fromObjectFilter('sys_form_set_code', allFieldToValueObj)}
      ></FormFieldSetting>
    ),
    TableFieldSettting: (
      <TableFieldSettting
        _letterPoint={this}
        allFieldToValueObj={fromObjectFilter('sys_table_set_code', allFieldToValueObj)}
      ></TableFieldSettting>
    ),
    TableAction: (
      <TableAction
        _letterPoint={this}
        allFieldToValueObj={fromObjectFilter('sys_table_set_code', allFieldToValueObj)}
      ></TableAction>
    ),
  };
  return TabPaneNodes[key];
}

// const routes = [
//   {
//     path: 'index',
//     breadcrumbName: '可视化配置',
//   },
//   {
//     path: 'first',
//     breadcrumbName: '配置表格',
//   },
// ];

export default class PageSetting extends React.Component {
  state: any;
  constructor(props: any) {
    super(props);

    this.state = {
      activeKey: getDefaultActiveKey(),
    };
  }
  render() {
    const { activeKey } = this.state;
    return (
      <>
        <Card>
          <PageHeader
            title="路径"
            subTitle={<Tag>http://localhost:8000/from/from-template</Tag>}
            // breadcrumb={{ routes }}
          />

          <Tabs
            {...TabsSetting}
            activeKey={activeKey}
            onTabClick={(value: any) => {
              setDefaultActiveKey(value);
              this.setState({
                activeKey: value,
                allFieldToValueObj: {},
              });
            }}
          >
            {Object.keys(maintableOperateExpandList).map(item => {
              return (
                <TabPane
                  disabled={maintableOperateExpandList[item].disabled}
                  tab={
                    <span style={{ cursor: 'pointer' }}>
                      {maintableOperateExpandList[item].name}
                    </span>
                  }
                  key={item}
                >
                  {getTabPaneNode.bind(this)(item)}
                </TabPane>
              );
            })}
          </Tabs>
        </Card>
      </>
    );
  }
}
